<template>
  <div class="department">
    <div class="search">
      <page-search @queryClick="queryClick" @resetClick="resetClick" :searchConfig="searchConfig" />
    </div>

    <div class="contenet">
      <page-content ref="pageContentRef" @newClick="newClick" @editClick="editClick" :contentConfig="contentConfig">
        <template #leader="scope">
          {{ scope[scope.prop] }}
        </template>
      </page-content>

      <page-modal ref="pageModalRef" :modalConfig="modalConfig">
        <template #test>
          <p>test</p>
        </template>
      </page-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
  import pageSearch from '@/components/page-search/page-search.vue'
  import pageContent from '@/components/page-content/page-content.vue'
  import pageModal from '@/components/page-modal/page-modal.vue'
  import type { IOption } from '@/components/page-modal'
  import usePageContent from '@/hooks/usePageContent'
  import usePageModal from '@/hooks/usePageModal'
  import useMainStore from '@/store/main/main'
  import contentConfig from './config/content.config'
  import searchConfig from './config/search.config'
  import modalConfig from './config/modal.config'
  import { storeToRefs } from 'pinia'

  // modal select option 设置
  const mainStore = useMainStore()
  const { entireDepartments } = storeToRefs(mainStore)
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options = entireDepartments.value.map((o) => ({
        label: o.name,
        value: o.id + ''
      })) as IOption[]
    }
  })

  const { pageContentRef, queryClick, resetClick } = usePageContent()
  const { pageModalRef, newClick, editClick } = usePageModal()
</script>

<style scoped>
  .department {
    .search {
      margin-bottom: 20px;
    }
  }
</style>
